//@ts-nocheck
import React from 'react'

import './index.less'

interface IProps {
  data?: any
}

const CylinderBarChart: React.FC<IProps> = ({ data }) => {

  const getPadding = (length) => {
    let padding
    switch (length) {
      case 1:
        padding = 50
        break;
      case 2:
        padding = 50
        break;

      case 3:
        padding = 50
        break;

      case 4:
        padding = 40
        break;
      case 5:
        padding = 28
        break;
      case 6:
        padding = 0
        break;

      default:
        padding = 0
        break;
    }
    return padding
  }
  return (
    <div className="cylinder-bar-chart">
      <div className="chart-wrapper">
        <div className="scale">
          <span>5.00</span>
          <span>0.00</span>
        </div>
        <div className="content">
          <div className="bar-list" style={{ padding: `0 ${getPadding(data?.length)}px` }}>
            {data?.map((item, index) => {
              return (
                <div className="bar-item" key={String(item.label) + item.code + index}>
                  <div className="bar-obj">
                    <div
                      className="active"
                      style={{ height: (item.code / 5).toFixed(2) * 100 + '%' }}
                    >
                      <div className="cylinder" />
                    </div>
                  </div>
                  <div className="title">{item.label}</div>
                  <div className="value">
                    <div style={{ bottom: (item.code / 5).toFixed(2) * 100 + '%' }}>
                      <span>{item.code}</span>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
          <div className="line-list">
            <div className="line " style={{ top: `${100 - 70}%` }}>
              <div className="dash green" />
              <div className="title">
                <span>数据库70%</span>
              </div>
            </div>
            <div className="line " style={{ top: `${100 - 30}%` }}>
              <div className="dash yellow" />
              <div className="title">
                <span>数据库30%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default (CylinderBarChart)
